<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>汽车列表</title>
		<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
		<!-- vue2.0发送ajax是使用axios来实现 -->
		<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js"></script>
		<style>
			table,
			th,
			td {
				border: 2px solid #000000;
				border-collapse: collapse;
				width: 800px;
				height: 30px;
				text-align: center;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<a href="add_car.html">添加汽车</a>
			<table>
				<tr>
					<th>序号</th>
					<th>品牌</th>
					<th>型号</th>
					<th>价格</th>
					<th>驱动方式</th>
					<th>操作</th>
				</tr>
				<!-- 数据渲染 -->
				<tr v-for="(car,i) in cars">
					<td>{{i + 1}}</td>
					<td>{{car.brand}}</td>
					<td>{{car.type}}</td>
					<td>{{car.price}}</td>
					<td>{{car.engine==0?"燃油":"纯电"}}</td>
					<td>
						<a href="#">修改</a>
						<a href="#">删除</a>
					</td>
				</tr>
			</table>
		</div>

		<script>
			var app = new Vue({
				el: '#app',
				data() {
					return {
						cars: []
					}
				},
				//钩子 -- 挂载完成
				mounted() {
					//页面加载完成后,发送异步请求
					var _this = this;
					axios({
						method: "get",
						//请求后台服务器地址
						//url: "http://localhost:8888/ajax/car/list"

						//请求json文件数据
						url: "../data/cars.json"
					}).then(function(resp) {
						//resp.data用来获取响应中的数据
						_this.cars = resp.data;
					});
				}
			});
		</script>
	</body>
</html>
